<extend name="common/base" />

<block name="resource">
    <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</block>
<block name="content">
    <div class="paddingtb20 match-video-player event-player match-bg relative">
         <include file="MatchV4/player_template" />
    </div> 
    <div class="marigntb20 container white-bg all-match marginb120">
        <h1 class="font13 colorthree">
            <i class="event-icon" style="background: url('{$game.logo}');background-size: contain;"></i>
            <span>{$game.name}&nbsp;&nbsp;赛事</span>
        </h1>

        <ul class="all-match-list all-match-list-box" style="padding-bottom:0;">
            <volist name="matches" id="match">
                <li class="transition">
                    <a href="/match-races-{$match.id}">
                        <p class="match-list-img  relative">
                            <img class="lazy" src="__ASSET__/Home/v4/src/images/m_defaut.jpg" data-original="{$match.pc_cover|default=$match['cover']}"/>
                            <span class="black02-bg absolute all-match-title display-box">
                                <b class="all-match-logo left">
                                    <img src="{$match.game.logo}"/>
                                </b>
                                <b class="box-flexo all-match-name white left">{$match.game.name}</b>
                                <b class="box-flexo all-match-name white left">{$match.subtitle}</b>
                            </span>
                        </p>
                    </a>
                </li>
            </volist>
        </ul>
    </div>
</block>
<block name="component">
<script src="__ASSET__/Home/v4/lib/js/date_format.js"></script>
<script src="__ASSET__/Home/v4/lib/js/layer.js"></script>
<script src="__ASSET__/Home/v4/lib/js/jquery.zclip.min.js"></script>
<script src="__ASSET__/Home/v4/lib/js/jwplayer.js"></script>
<script src="__ASSET__/Home/v4/dist/js/match_n.js"></script>
<script src="__ASSET__/Home/v4/dist/js/background.js"></script>
<script src="__ASSET__/Home/v4/dist/js/all.js" rel="stylesheet"></script>
<script>
        window._THIS = {
            detail_url : "{:U('api/match/detailNew', $show_id)}",
            detail_page :"/match-detail-",
            recentResult:"/match-ajaxRecent",
            VideoPlay:"{:C('LOCAL_DOMAIN')}/video-play-",
            bg_img:"{$bg_img}",
        };
        var matches = {$matches|json_encode};
        if(matches != null){
            var match_len=matches.length;
            var math_size=16;
            var match__total_page=Math.ceil(match_len/math_size);
            var match_page=1;
            window.scrollFlag = true;
            $(window).scroll(function(){
             if(match_page<match__total_page){
                  if(window.scrollFlag){
                     if ($(document).scrollTop() >= ($('.match_loading').offset().top + $('.match_loading').outerHeight() - $(window).height() - 20)) {
                            window.scrollFlag = false;
                            $('.match_loading').show();
                            var matches_arr=[];
                            var match_str="";
                            var start_match=(math_size*match_page);
                            console.log(match_page)
                            match_page++;
                            var end_match=(math_size*match_page)>match_len?match_len:(math_size*match_page);
                            for(var i=start_match;i<end_match;i++){
                               matches_arr.push(matches[i]);
                            }
                            $.each(matches_arr,function(k){
                                 match_str+='<li style="margin-bottom:0px;">\
                                                <a href="/match-races-'+matches_arr[k].id+'">\
                                                    <p class="match-list-img  relative">\
                                                        <img class="lazy" src="__ASSET__/Home/v4/src/images/m_defaut.jpg" data-original="'+matches_arr[k].cover+'"/>\
                                                        <span class="black02-bg absolute all-match-title display-box">\
                                                            <b class="all-match-logo left">\
                                                                <img src="'+matches_arr[k].game.logo+'"/>\
                                                            </b>\
                                                            <b class="box-flexo all-match-name white left">'+matches_arr[k].title+'</b>\
                                                            <b class="box-flexo all-match-name white left">'+matches_arr[k].subtitle+'</b>\
                                                        </span>\
                                                    </p>\
                                                </a>\
                                       </li>';
                            })
                              $(".all-match-list-box").append(match_str);
                                $("img.lazy").lazyload({
                                    effect: "fadeIn",
                                    threshold :180,
                                    // event: "scrollstop"
                                })
                           window.scrollFlag = true;
                           $('.match_loading').hide();
                        }
                  }
 
             }
          })
        }       
</script>
</block>
